<template>
    <div>
        <el-dialog
                :title="commentForm.id ? $t('common.edit'):$t('common.add')"
                :visible.sync="editDialog"
                :before-close="cancelEdit"
                width="700px"
                lock-scroll
                center>
            <el-form ref="commentForm" :model="commentForm" label-width="100px" :hide-required-asterisk='true'
                     label-position="left">
                <el-form-item v-for="item,key in commentForm" :label="$t('comment.'+key)" :rules="commentFormRules[key]"
                              v-if="key !== 'id' || commentForm[key]"
                              :prop="key">
                    <el-rate v-if="key === 'score'" v-model="commentForm[key]"></el-rate>
                    <uploadImg v-else-if="key === 'img'"
                               :length="3"
                               :upload-list="uploadList"></uploadImg>
                    <el-input v-else v-model="commentForm[key]"
                              :disabled="disabledInput.includes(key)"
                              :type="inputType[key]"></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelEdit">{{$t('common.cancel')}}</el-button>
                <el-button type="primary" @click="confirmAddTable">{{$t('common.confirm')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import uploadImg from '../components/uploadImg'
    export default {
        name: "commentEdit",
        components:{
            uploadImg
        },
        props:{
            commentForm:{
                type:Object,
                default(){
                    return {
                        id:'',
                        adId:'',
                        comment:'',
                        img:'',
                        score:5,
                        commentUser:'',
                    }
                }
            },
            refresh:{
                type:Boolean,
                default:false
            },
            editDialog:{
                type:Boolean,
                default:false
            }
        },
        data(){
            return {
                commentFormRules:{
                    comment: [{required: true, message: this.$t('comment.commentAddInputNoDataTip'), trigger: 'blur'}],
                    adId: [{required: true, message: this.$t('comment.commentAdIdInputNoDataTip'), trigger: 'blur'}],
                },
                disabledInput:['id'],
                inputType:{
                    comment:'textarea',
                    commentUser:'text',
                    adId:'number',
                },
                uploadList: [],
            }
        },
        methods:{

            confirmAddTableCheck(){
                let valid = true
                this.$refs['commentForm'].validate(v => {
                    valid = v
                })
                return valid
            },
            confirmAddTable() {
                if(!this.confirmAddTableCheck()) return
                let params = {}
                Object.assign(params, this.commentForm)
                if (!params.id) delete params.id
                this.$commentEdit([params]).then(response => {
                    if (response.code && response.code === 'success') {
                        params.id?this.$message.success(this.$t('common.editSuccess')):this.$message.success(this.$t('common.addSuccess'))
                        this.$emit("update:editDialog",false)
                        this.$emit("update:refresh",true)
                    } else {
                        this.$message.error(this.$t('common.error'))
                    }
                })
            },
            cancelEdit() {
                this.$emit("update:editDialog",false)
                this.resetForm()
            },
            resetForm() {
                let commentForm = {
                    id:'',
                    adId:'',
                    comment:'',
                    img:'',
                    score:5,
                    commentUser:'',
                }
                this.uploadList = []
                this.$emit("update:commentForm",commentForm)
                this.$refs.commentForm.clearValidate()
            },
            setImages(){
                if(!this.commentForm.img){
                    return
                }
                let imgs = this.commentForm.img.split(/[,，]/)
                this.uploadList = imgs.map(v=>{
                    return {
                        url: v,
                        name: v.replace(/(.*\/)/,''),
                        status: 1,
                        percentage: 100
                    }
                })
            }
        },

        watch: {
            uploadList: {
                handler(newV, oldV) {
                    this.commentForm.img = newV.filter(v=>{
                        return v.url!==''
                    }).map(v=>{
                        return v.url
                    }).join(',')
                },
                deep: true
            }
        }
    }
</script>

<style scoped>

</style>